@charset "UTF-8";
/* Soot Seekers CSS Document */

body{margin: 0; padding: 0; background-image: url(images/bkgd.jpg); background-repeat: repeat-x;}

.clear{clear: both;}

/*****		SOOT		*****/

#soot{position: absolute; bottom: 0; right: 0px; z-index: 2;}

#soot2{position: absolute; top: 0; left: 320px; z-index: 2;}

#soot3{position: absolute; bottom: 10px; left: 90px; z-index: 2;}

/*****		FONTS		*****/

@font-face {
   font-family: TDH;
   src: url('fonts/talldark.ttf');
}

@font-face {
   font-family: Bebas;
   src: url('fonts/BebasNeue.otf');
}

@font-face {
   font-family: GeoSans;
   src: url('fonts/GeosansLight.ttf');
}

.geosans{font-family: "GeoSans", Arial, Helvetica, sans-serif;}

.bebas{font-family: "Bebas", Arial, Helvetica, sans-serif;}

/*****		BACKGROUND		*****/

#bkgd{position: fixed;top: 0; width: 2950px; height: 40px; background-image: url(images/banner_back.png); background-repeat: repeat-x fixed; z-index: 1000;}

/*****		WRAPPER		*****/

#wrapper{position: relative; margin: 55px auto; width: 950px; background-color: #FFF; /*background-image: url(images/wrap.png); background-repeat: repeat-y;*/ z-index: 1;}

/******		HEADER		*****/

#header{position: relative; width: 930px; height: 180px;}

	#logo{position: absolute; top: 0px; left: 0; margin: 30px 0 40px 40px; z-index: 500;}
	
  	#tag{position: absolute; top: 128px; left: 175px; font-size: 105%; letter-spacing: .5px;}
	
	#contact{position: absolute; top: 110px; right: 0px; width: 245px; height: 70px; margin: 0 0 0 0; color: #000; font-size: 125%; z-index: 3; background-image: url(images/con_back.png); background-repeat: no-repeat;}
	
		#phone{float: left; margin: 20px 10px 0 0;}
	
		#con_head{float: left; padding: 15px 0 0 0;}
		
		#con_num{float: left; text-align: right; padding: 15px 0 0 10px;}
	
/******		NAV			*****/	

#nav{position: absolute; top: 10px; right: 0px; width: 550px; margin: 15px 5px 15px 15px; padding-top: 7px; background-image: url(images/nav_back.png); background-repeat: no-repeat; z-index: 3;}	
	
	#nav ul{list-style-type: none; padding: 0; color: #000; margin: 0 0 0 0;}

	#nav ul li{float: left; width: auto; padding: 8px 17px; font-size: 115%; letter-spacing: 1px;}
	
	.border{border-right: 1px solid #222;}
	
/*****		CERT		*****/

#cert{position: absolute; top: 180px; right: -127px; width: 120px; height: 240px; background-image: url(images/cert_wrap.png); background-repeat: no-repeat; padding: 15px 0 0 7px;}

	#ccs{margin: 10px 0 0 20px;}

/*****		TRANSITIONS		*****/

#trans1{float: left; width: 60px; margin: 0px 0 0px 13px; padding: 0;}

#trans2{position: absolute; width: 60px; top: -13px; left: 33px;}	

/*****		CONTENT		*****/

#main_cont{float: left; width: 910px; margin: 0 20px 10px 20px; /*background-image: url(images/maincon_back.png); background-repeat: repeat-y;*/}

#logo_small{position: absolute; width: 130px; bottom: 40px; right: 40px;}

/*****		TOP CONTENT		*****/

#pic_wrapper{position: relative; width: 910px; height: 370px; margin: 0; background-image: url(images/pic_back.png); background-repeat:no-repeat; overflow: hidden; z-index: 50;}

	#pic{position: absolute; width: 890px; height: 350px; margin: 10px 0 0 10px; border: 1px solid #000; overflow: hidden; z-index: 6;}
	
	#controls{position: absolute; width: 155px; bottom: 10px; right: 30px; z-index:100;}
	
		#play, #pause, #left, #right{float: left; margin: 4px;}
	
	#cover{position: absolute; top: 20px; left: 10px; width: 270px; z-index: 15;}
	
		#arrow{position: absolute; width: 20px; height: 32px; top: 150px; left: 240px; cursor: pointer; width: 20px; z-index: 40; background-image: url(images/path.png); background-repeat: no-repeat;}
			
			#arrow:hover{background-image: url(images/path_hover.png);}
			
		#arrow2{position: absolute; width: 20px; height: 32px; top: 150px; left: 240px; cursor: pointer; width: 20px; z-index: 40; background-image: url(images/pathClose.png); background-repeat: no-repeat; visibility: hidden;}
			
			#arrow2:hover{background-image: url(images/pathCloseHover.png);}	
		
		#back{position: absolute; top: 0; width: 270px;}
		
		#script{position: absolute; top: 0; left: 27px; width: 200px; color: #fff; font-size: 105%; z-index: 20;}
	
/*****		BOTTOM CONTENT		*****/

#bot_con{position: relative; width: 910px; height: 325px; margin: 40px 0 60px 0; z-index: 20;}
	
/*****		SIDE1		*****/	

#side1{position: absolute; width: 450px; height: 320px; top: 13px; left: 10px; padding: 0; background-image: url(images/side1_back.png); background-repeat: no-repeat;}

	#text, #jscho{float: left;}
	
	#text{margin: 15px 0 0 10px;}
	
	#jscho{margin: 25px 0 0 193px;}
	
	#bio{float: left; margin: 5px 0 0 45px; width: 385px; color: #fff; font-size: 115%;}
	
/*****		SIDE2		*****/

#side2{position: absolute; width: 440px; height: 320px; top: 0px; left: 460px; padding: 0; background-image: url(images/side2_back.png); background-repeat: no-repeat;}
	
	#side2>img{float: left;}

	#test{float: left; width: 390px; margin: 60px 20px; font-size: 115%;}

/*****		FOOTER		*****/

#footer{position: relative; width: 950px; height: 30px; background-color: #900; /*background-image: url(images/footer_back.png); background-repeat: repeat-y;*/ z-index: 50;}

#nav_foot ul{float: right; list-style-type: none; padding: 0; color: #000; margin: 7px 10px 0 0; color: #fff;}

	#nav_foot ul li{float: left; width: auto; height: 16px; padding: 0px 15px; font-size: 95%; letter-spacing: 1px;}
	
		